<template>
  <view class="vmall-classify">
    <view class="u-wrap">
      <view class="u-search-box">
        <up-search placeholder="搜索商品" v-model="keyword" :showAction="false"></up-search>
      </view>
      <view class="u-menu-wrap">
        <view class="page-view">
          <view class="item-container1" v-if="goodsList.length > 0">
            <view v-for="(record, index1) in goodsList" :key="index1" class="thumb-box1">
              <ShopCard class="items" :item="record" />
            </view>
          </view>
          <view v-else class="empty-container flex justify-center items-center">
            <Empty :emptyInfo="emptyInfo" />
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import ShopCard from "@/components/shop/card.vue";
import { IMG_URL2 } from "@/config";
import Empty from "@/components/empty.vue";
import { shopApi } from "@/api";
const EmptyImage = ref(IMG_URL2 + "empty/normal.png");

const emptyInfo = ref({
  image: EmptyImage,
  width: 300,
  height: 300,
  tip: "暂无数据~"
});
let categoryId = ref('');
let pageSize = ref(10)
let currentPage = ref(1)
let totalCount = ref(0)
let loadStatus =ref('正在加载中')
let categoryName = ref('')

const goodsList = ref([]);
const getData = (type)=>{
  let data={
    currentPage: currentPage.value,
    categoryId: categoryId.value,
    pageSize: pageSize.value
  }
  shopApi.CATEGORYGETFRONTPRODUCTLIST(data).then((res) => {
    if(res.code==200){
      totalCount.value=res.result.totalCount
      if(type==1){
        goodsList.value=res.result.data
      }else{
        goodsList.value=res.result.data?goodsList.value.concat(res.result.data):[]
      }
    }else{
        uni.showToast({
            title: res.errMsg,
            icon: "success",
        });
    }
    
  })
}
onLoad((options) => {
  categoryId.value=options.categoryId
  categoryName.value=options.categoryName
  uni.setNavigationBarTitle({
    title: categoryName.value+'分类',
  });
  getData(1)
});
// 触底加载
onReachBottom(() => {
  console.log("触底加载");
  if (productList.value.length >= totalCount.value) {
    loadStatus.value = "没有更多数据了";
    return
  }
  loadStatus.value = "正在加载中";
  currentPage.value++
  getData(2);
});
// 下拉刷新
onPullDownRefresh(() => {
  console.log("下拉刷新");
  // 正常情况下接口返回应该很会很快。故意延迟调用，让用户有在刷新的体验感
  loadStatus.value = "正在加载中";
  productList.value = [];
  getData(1);
  setTimeout(() => {
    uni.stopPullDownRefresh();
  }, 300);
});


</script>

<style lang="scss" scoped>
page {
  background-color: #ffffff;
}
</style>
<style lang="scss" scoped>
.vmall-classify {
  .u-wrap {
    height: calc(100vh);
    /* #ifdef H5 */
    height: calc(100vh - var(--window-bottom));
    /* #endif */
    display: flex;
    flex-direction: column;
  }

  .u-search-box {
    padding: 18rpx 30rpx;
    box-sizing: border-box;
    background-color: #ffffff;
  }

  .u-menu-wrap {
    // margin-top: 88rpx;
    /* #ifdef APP-PLUS */
    margin-top: calc(var(--status-bar-height) + 88rpx);
    /* #endif */
    flex: 1;
    display: flex;
    overflow: hidden;
  }

  .u-search-inner {
    // background-color: rgb(234, 234, 234);
    border-radius: 100rpx;
    display: flex;
    align-items: center;
    padding: 10rpx 16rpx;
    box-sizing: border-box;
  }

  .u-search-text {
    font-size: 26rpx;
    color: $u-tips-color;
    margin-left: 10rpx;
  }

  .u-tab-view {
    width: 200rpx;
    height: 100%;
  }

  .u-tab-item {
    height: 110rpx;
    background: #f6f6f6;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26rpx;
    color: #444;
    font-weight: 400;
    line-height: 1;
  }

  .u-tab-item-active {
    position: relative;
    color: rgba(214, 142, 68, 1);
    font-size: 30rpx;
    font-weight: 600;
    background: #fff;
  }

  .u-tab-item-active::before {
    content: "";
    position: absolute;
    border-left: 4px solid rgba(214, 142, 68, 1);
    height: 32rpx;
    left: 0;
    top: 39rpx;
  }

  .right-box {
    background-color: rgb(250, 250, 250);
  }

  .page-view {
    width: 100%;
    padding: 16rpx;
    box-sizing: border-box;

    .item-container1 {
      width: 100%;

      .thumb-box1 {
        width: 100%;
        border-radius: 12rpx;
        overflow: hidden;
        margin-bottom: 24rpx;

        .items {
          width: 100%;
        }
      }
    }
  }





}
</style>